<template>
  <div class="dis-ib btn-group bg-gray95">
    <button
      type="button"
      :class="{ btn: true, active: defValue.value == value }"
      @click="change(defValue.value)"
    >
      {{ defValue.label }}
    </button>
    <button
      v-for="(item, k) in options"
      :key="k"
      type="button"
      :class="{ btn: true, active: item.value == value }"
      @click="change(item.value)"
    >
      <i v-if="item.iconClass" :class="item.iconClass"></i>{{ item.label }}
    </button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "",
  props: {
    defValue: {
      type: Object,
      default: function () {
        return { label: "全部", value: 0 };
      },
    },
    options: {
      type: Array,
      default: function () {
        return [{ label: "", value: "", iconClass: "" }];
      },
    },
  },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    change: function (val) {
      if (val == this.value) {
        this.value = this.defValue.value;
      } else {
        this.value = val;
      }
      this.$emit("change", val);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/config.less");
.btn-group {
  font-size: 0;
  padding: 4px;
  .btn {
    padding: 4px 12px;
    border-radius: 4px;
    &.active {
      background-color: #fff;
      color: @blue;
    }
    & + .btn {
      margin-left: 0;
    }
  }
}
</style>
